<template>
  <div>
    <div class="container">
      <div class="Pic">
        <router-link
          :to="{name:'Details',params:{goodsid:item.goodsId}}"
          :key="index"
          v-for="(item,index) in data"
          v-if="data.length>0"
        >
          <div class="pic">
            <img :src="item.goodsPic" alt>
            <p class="name">{{item.goodsName}}</p>
            <p>
              <span class="price">参考价:¥{{item.reference_price}}</span>
              <span class="pinglun">
                <img src="..\assets\icon\mine\pinglun.png" alt>
                {{item.commentNum}}
              </span>
            </p>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ListInfoInfo",
  data() {
    return {
      data: []
    };
  },

  mounted() {
    // if (this.$route.params.type) {
      this.$axios
        // .get("http://localhost:3000/api/chanpinInfo1", {
        //   params: {
        //     type: this.$route.params.type
        //   }
        // })
        .get("http://localhost:3000/api/chanpinInfo?count=6")
        .then(res => {
          console.log(res.data);
          this.data = res.data;
        })
        .catch(error => {
          console.log(error);
        });
    }
  // }
};
</script>

<style lang="less" scoped>
.container {
  position: absolute;
  top: 90px;
  left: 0;
  width: 335px;
  margin: 0 20px;
}

.pic {
  width: 167.5px;
  height: 161.5px;
  // padding: 0 0 3px 0;
  float: left;
  background-color: #fff;
  border: 0.5px solid #ccc;
  box-sizing: border-box;
  margin-bottom: 30px;
  border-radius: 5px;
}
.pic img {
  width: 161.5px;
  height: 120px;
  padding: 0 1.5px;
}
.name {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.price {
  display: inline-block;
  font-size: 14px;
}
.pinglun {
  display: inline-block;
  font-size: 14px;
  text-align: right;
  width: 80px;
}
.pinglun img {
  width: 10px;
  height: 10px;
}
</style>


